<template>
	<view>
		<view class='headBox'>
			<image :src='bgsrc'></image>
			<view class='userInfo'>
				<view class='userInfoTxt'>
					<view>{{name}}</view>
					<view>{{company}}</view>
				</view>
				<view class='userHead'>
					<image :src='head'></image>
				</view>
			</view>
			
			<view class='justify_around text_center userDatas'>
				<view class='userData'>
					<view>{{course}}</view>
					<view>学习课程数</view>
				</view>
				<view class='userData'>
					<view>{{duration}}<text class='fs_30'>分</text></view>
					<view>学习时长</view>
				</view>
			</view>
		</view>

		<view class='lists'>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_Collection2x.png'></image><text>我的收藏</text>
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_dingdan2x.png'></image>我的订单
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
		</view>

		<view class='lists'>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_jifen2x.png'></image>我的积分
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_daka2x.png'></image>我的打卡
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_gonggao2x.png'></image>我的公告
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_share2x.png'></image>我的分享
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
		</view>

		<view class='lists'>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_kefu2x.png'></image>联系客服
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_help2x.png'></image>帮助与反馈
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
			<navigator url='' class='justify_between list'>
				<view class='listName'>
					<image src='../../static/ic_Setup2x.png'></image>设置
				</view>
				<view class='more'>
					<image src='../../static/more2x.png'></image>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgsrc: '../../static/background2x.png',
				name: 'Candy',
				company: '润禾教育科技有限公司',
				head: '../../static/Candy2x.png',
				course: 36,
				duration: 54
			};
		}
	}
</script>

<style lang="scss">
	.headBox {
		position: relative;
		margin-bottom: 90rpx;
	}

	.headBox>image {
		width: 100%;
		height: 380rpx;
	}

	.userInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 100rpx;
		left: 30rpx;
		right: 30rpx;
	}

	.userInfoTxt {
		color: #fff;
	}

	.userInfoTxt view:first-child {
		font-size: 54rpx;
		margin-bottom: 30rpx;
	}

	.userInfoTxt view:last-child {
		font-size: 22rpx;
	}

	.userHead image {
		width: 146rpx;
		height: 146rpx;
	}

	.userDatas {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 0 30rpx;
		padding: 30rpx 0;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -60rpx;
	}

	.userData view:first-child {
		font-size: 46rpx;
	}

	.userData view:last-child {
		font-size: 24rpx;
		color: #838383;
	}

	.lists {
		background-color: #fff;
		margin: 30rpx;
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
	}

	.list {
		padding: 30rpx 0;
	}

	.listName {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.listName image {
		width: 42rpx;
		height: 41rpx;
		margin-right: 20rpx;
	}

	.more image {
		width: 12rpx;
		height: 22rpx;
	}
</style>
